<template>
  <div class="preference-view" v-if="preference">
    <div class="preference-item" v-if="preference.date?.enable">
      <label class="label">日期：</label>
      <div class="operator">{{ getOperatorLabel('date', preference.date.operator) }}</div>
      <div class="value" v-if="preference.date.operator == Operator.recent">
          {{ preference.date.recent }} 天
      </div>
      <div class="value" v-else-if="preference.date.operator == Operator.between">

          {{ $filters.date(preference.date.values[0], 'yyyy-MM-dd') }} - {{ $filters.date(preference.date.values[1], 'yyyy-MM-dd') }}
      </div>
      <div class="value" v-else>
          {{ $filters.date(preference.date.values[0], 'yyyy-MM-dd') }}
      </div>
    </div>
    <div class="preference-item" v-if="preference.commission?.enable">
      <label class="label">佣金：</label>
      <div class="operator">{{ getOperatorLabel('number', preference.commission.operator) }}</div>
      <div class="value">
        <div class="value" v-if="preference.commission.operator == Operator.between">
          {{ preference.commission.values[0] }} - {{ preference.commission.values[1] }}  %
      </div>
      <div class="value" v-else>
          {{ preference.commission.values[0] }} %
      </div>
      </div>
    </div>
    <div class="preference-item" v-if="preference.category?.enable">
      <label class="label">分类：</label>
      <div class="value">
        <div class="category-item" v-for="(item, idx) in preference.category.items" :key="idx">
          {{item.first}}/{{ item.second}} (权重：{{ item.weight }})
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Operator, OperatorGroup } from '@/framework/common/constants';
defineOptions({ name: "PreferenceView" });

const props = defineProps({
  value: {
    type: Object
  }
})

const preference = ref(props.value)

function getOperatorLabel(group: string, operator: string) : string|null{
  const operators =  OperatorGroup[group] || [];
  return operators.filter(item => item.value === operator)[0].label;
}

watch(()=>props.value, (newVal)=>{
  preference.value = newVal
})

</script>

<style lang="scss" scoped>
  .preference-item{
    display: flex;
    width: 350px;
  }
  .category-item{
    text-align: left;
  }
</style>
